<template>
    <div class="submit-root">
        <header>
            <div class="hunter-img"><img :src="dingdan.img"></div>
            <div class="mask"></div>
            <p v-show="!hui">支付剩余时间&ensp;<span class="time">{{time}}</span></p>
            <p v-show="hui">已过期</p>
        </header>
        <div class="title">
            <p>{{dingdan.title}}</p>
        </div>
        <div class="content">
            <div class="info">
                <h3>预约信息</h3>
                <p><span>体验日期&ensp;&ensp;</span>{{dingdan.selectDate}}</p>
                <p><span>预约数量&ensp;&ensp;</span>{{dingdan.num}}</p>
                <p><span>联系人&ensp;&ensp;</span>{{dingdan.username}}</p>
                <p><span>联系电话&ensp;&ensp;</span>{{dingdan.tel}}</p>
                <p><span>体验地点&ensp;&ensp;</span>{{dingdan.address}}</p>
                <p><span>下单时间&ensp;&ensp;</span>{{dingdan.date}}</p>
                <p><span>应付金额&ensp;&ensp;</span>￥ {{dingdan.price}}</p>
            </div>

                
                
            
            <div class="footer" :class="{hui:hui}">
                <p>
                    <span class="qian">￥</span><span class="qian-range">{{dingdan.price}}</span><span>&ensp;立即支付</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data: function() {
            return {
                isGou: true,
                second: '',
                time: '10:00',
                dingdan: '',
                hui:false
            }
        },
        computed: {
            ...mapState([
                "proInfo",
                "dingdanInfo",

            ])
        },
        mounted: function() {
            var params = {
                    time: this.$route.query.nowTime
                }
            this.$store.dispatch("reqOneorder", params)
                .then(res => {
                    this.dingdan = res.data.data;

                    var nowTime = new Date().getTime();
                    var clickTime = this.dingdan.nowTime;
                    var pTime = nowTime * 1 - clickTime * 1;
                    this.second = 600 - parseInt(pTime / 1000);

                    var timer = setInterval(() => {
                        this.changeTime(this.second);
                    }, 1000);
                    if (this.second <= 0) {
                        clearInterval(timer);
                        this.time = "00:00";
                        this.hui =true;
                    }

                });
        },
        methods: {
            typeClick: function(n) {
                if (n == 1) {
                    this.isGou = true;
                }
                if (n == 2) {
                    this.isGou = false;
                }
            },
            changeTime: function(t) {
                t = t * 1;
                t--;
                var minute = (parseInt(t / 60) > 9 ? parseInt(t / 60) : '0' + parseInt(t / 60));
                var sec = ((t % 60) > 9 ? (t % 60) : '0' + (t % 60));
                this.time = minute + ":" + sec;
                this.second = t;
            }
        }
    }
</script>

<style scoped>
    .submit-root {
        width: 100vw;
        height: 100vh;
        overflow: scroll;
        background-color: #fff;
        color: #5c5c5c;
    }
    
    .hunter-img {
        position: relative;
        width: 100vw;
        height: 14vh;
        overflow: hidden;
    }
    
    .hunter-img img {
        width: 100vw;
        position: absolute;
        top: -11vh;
    }
    
    .type {
        display: flex;
        justify-content: space-between;
    }
    
    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 14vh;
        background: rgba(0, 0, 0, .5);
    }
    
    header {
        position: relative;
    }
    
    header p {
        width: 100vw;
        color: #fff;
        text-align: center;
        position: absolute;
        top: 2vh;
    }
    
    h3 {
        font-size: 0.93rem;
        color: #5c5c5c;
        font-weight: 600;
    }
    
    .content {
        margin: 5vw 4vw 0;
    }
    
    .qian {
        font-size: 14px;
        position: relative;
        top: -4vw;
        left: 0.7vw;
    }
    
    .qian-range {
        font-size: 1.6rem;
        font-weight: 550;
    }
    
    .info {
        font-size: 0.91rem;
    }
    
    .info span {
        display: inline-block;
        width: 27vw;
        color: #999;
    }
    
    .zhifu {
        margin-top: 5vh;
    }
    
    .zhifu p {
        margin: 5vh 0;
    }
    
    .zhifu img {
        width: 9vw;
        height: 8vw;
        position: relative;
        top: 2vw;
    }
    
    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 57px;
        line-height: 50px;
        background-color: #f36700;
        color: #fff;
        font-size: 1.15rem;
        text-align: center;
    }
    .hui{
        background-color: #bbb;
    }
    .footer p {
        margin: 0;
    }
    
    .gou {
        display: inline-block;
        width: 6vw;
        height: 6vw;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: relative;
        top: 4vw;
        text-align: center;
        font-size: 1.44rem;
        font-weight: 100;
        color: #f36700;
    }
    
    .time {
        font-size: 1.3rem;
    }
    .title{
        padding:2vw 5vw 1vw;
        font-size: 1.05rem;
        font-weight: 600;
    }
</style>